<template>
  <div id="test" class="test">
  </div>
</template>

<script>
const {
  UniverCore,
  UniverDesign,
  UniverEngineRender,
  UniverEngineFormula,
  UniverDocs,
  UniverDocsUi,
  UniverUi,
  UniverSheets,
  UniverSheetsUi,
  UniverSheetsNumfmt,
  UniverSheetsFormula,
  UniverFacade,
} = window

export default {
  name: 'test-vis',
  cnName: '',
  data() {
    return {

    }
  },
  methods: {
    init() {
      this.init1()
    },
    init1() {
      const univer = new UniverCore.Univer({
        theme: UniverDesign.defaultTheme, // 主题
        locale: UniverCore.LocaleType.ZH_CN, // 语言
        locales: {
          [UniverCore.LocaleType.ZH_CN]: UniverUMD['zh-CN'], // 国际化可选项
        }
      })

      // 读插件
      univer.registerPlugin(UniverEngineRender.UniverRenderEnginePlugin);
      // 规则插件
      univer.registerPlugin(UniverEngineFormula.UniverFormulaEnginePlugin);
      // UI插件
      univer.registerPlugin(UniverUi.UniverUIPlugin, {
        container: "test",
      });

      univer.registerPlugin(UniverDocs.UniverDocsPlugin, {
        hasScroll: false,
      });
      univer.registerPlugin(UniverDocsUi.UniverDocsUIPlugin);

      univer.registerPlugin(UniverSheets.UniverSheetsPlugin);
      univer.registerPlugin(UniverSheetsUi.UniverSheetsUIPlugin);
      univer.registerPlugin(UniverSheetsNumfmt.UniverSheetsNumfmtPlugin);
      univer.registerPlugin(UniverSheetsFormula.UniverSheetsFormulaPlugin);

      // 工作簿
      const wb = univer.createUnit(UniverCore.UniverInstanceType.UNIVER_SHEET, {})

      // API
      const univerAPI = UniverFacade.FUniver.newAPI(univer)

      // sheet
      const activeSheet = univerAPI.getActiveWorkbook().getActiveSheet();
      const range = activeSheet.getRange(0, 0, 2, 2);

      range.setValues({
        0: {
          0: 'A1',
          1: 'B1',
        },
        1: {
          0: 'A2',
          1: 'B2',
        },
        2: {
          0: 'A3',
          1: 'B3',
        },
      });

    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
.test {
  width: 100%;
  height: 50%;
}
</style>
